import { Component, OnInit, Input, Output, OnChanges, SimpleChanges } from '@angular/core';
import { optionsData, seriesData } from "./echarts.model";

@Component({
	selector: 'app-compare-echarts',
	templateUrl: './compare-echarts.component.html',
	styleUrls: ['./compare-echarts.component.css']
})
export class CompareEchartsComponent implements OnInit {

	/**
	 * echarts实例对象
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
	private echartsIntance: any = null;

	/**
	 * 父组件输入echarts参数
	 * 
	 * @private
	 * @type {*}@memberof CompareEchartsComponent
	 */
	@Input() legend: {};
	@Input() series: seriesData[];
	@Input() maxPower: number;
	options: optionsData;
	xAxis: object;
	grid: object;
	yAxis: object;
	tooltip: object;
	isFirst: boolean = true;

	constructor() {

	}

	ngOnInit() {
		this.options = {
			tooltip: this.tooltip,
			grid: this.grid,
			xAxis: this.xAxis,
			yAxis: this.yAxis,
			series: this.series
		};
	}

	ngOnChanges(changes: SimpleChanges) {

		if (changes['series'] && changes['series'].currentValue) {
			if (!this.isFirst) {
				this.updateEchart();
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}

		if (changes['legend'] && changes['legend'].currentValue) {
			this.options.legend = this.legend;
			if (!this.isFirst && this.echartsIntance) {
				this.options.series = this.series;
				this.echartsIntance.setOption(this.options, true);
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}

		if (changes['maxPower'] && changes['maxPower'].currentValue) {
			this.options.yAxis['max'] = this.maxPower;
			if (!this.isFirst && this.echartsIntance) {
				this.echartsIntance.setOption(this.options, true);
			} else {
				this.isFirst = false;
				this.initOptions();
			}
		}
	}
	/**
	 * 初始化图表  
	 * 
	 * @memberof CompareEchartsComponent
	 */
	initOptions() {
		this.xAxis = {
			type: 'value',
			name: "风速(m/s)",
			splitLine: {
				lineStyle: {
					color: '#1b4268',
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "#35789d",
					type: 'solid',
					width: 2,
				},
			},
			max: 25,
			min: 0,
			interval: 2,
			axisLabel: {
				show: true,
				textStyle: {
					color: "#35789d",
					fontSize: 12,
				},
			},
		}
		this.grid = {
			left: '5%',
			right: '12%',
			bottom: '3%',
			containLabel: true
		}
		this.yAxis = {
			type: 'value',
			name: '功率：kW',
			min: 0,
			max: this.maxPower,
			interval: 200,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#43a0b3'
				},
				margin: 15
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#35789d',
					width: 2
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#1b4268'
				}
			}
		}
		this.tooltip = {
			trigger: 'axis',
			formatter: (params) => {
				let res = "";
				for (let i = 0; i < params.length; i++) {
					if(params[i].seriesType == 'line') {
						let index = params[i].seriesIndex;
						res += params[i].marker + params[i].seriesName + "&nbsp;&nbsp;" + '风速' + ':' + params[i].value[0] + 'm/s' + '&nbsp;&nbsp;&nbsp;&nbsp;' + '功率' + ':' + params[i].value[1] + 'kW' + "<br/ >";	
					}		
				}
				return res;
			},
		}
		if (this.options == null) {
			this.options = {
				tooltip: this.tooltip,
				grid: this.grid,
				legend: this.legend,
				xAxis: this.xAxis,
				yAxis: this.yAxis,
				series: this.series
			};
		}
	}
	/**
	 * 初始化echarts实例
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	onChartInit(ec: any) {
		this.echartsIntance = ec;
		this.updateEchart();
		
	}
	/**
	 * 更新echarts实例数据
	 * 
	 * 
	 * @memberof CompareEchartsComponent
	 */
	updateEchart() {
		if (this.echartsIntance != null) {
			this.options.tooltip = this.tooltip;
			this.options.series = this.series;
			this.echartsIntance.setOption(this.options);
			// console.log(this.options)			
		};
	}

}



// WEBPACK FOOTER //
// ./src/app/module/performance/power-compare/compare-echarts/compare-echarts.component.ts